
<template>
  <div class="caruser_box">
    <topHeader>
      <div slot="left">
        <img src="./../../assets/img/return.png" alt="" @click="goPrev">
      </div>
      <span slot="center">发布信息修改</span>
    </topHeader>
    <div class="caruser_layout">
      <div class="begin_city_box">
        <div class="dot"></div>
        <div class="title">出发城市</div>
        <div class="city">{{ orderInfo.start }}</div>
      </div>
      <div class="end_city_box">
        <div class="dot"></div>
        <div class="title">结束城市</div>
        <div class="city">{{ orderInfo.end }}</div>
      </div>
      <div class="help_call_box">
        <div class="help">
          <div><img src="./../../assets/img/clock.png" alt=""></div>
          <div>
            <Datetime
              v-model="orderInfo.outtime"
              format="YYYY-MM-DD HH:mm"
              @on-change="changeTime"
              :placeholder="'出发时间'"
              year-row="{value}年"
              month-row="{value}月"
              day-row="{value}日"
              hour-row="{value}点"
              minute-row="{value}分"
              confirm-text="完成"
              cancel-text="取消">
              </Datetime>
            </div>
          <!-- <div><input type="text" placeholder="请选择出发时间"></div> -->
        </div>
        <div class="call">
          <div><img src="./../../assets/img/people.png" alt=""></div>
          <div>
            <popup-picker
            :placeholder="'可乘坐人数'"
            :data="peopleNumList"
            v-model="peopleNum"
            @on-change="onPeopleChange">
             </popup-picker>
          </div>
          <!-- <div><input type="text" placeholder="请选择人数"></div> -->
        </div>
      </div>
    </div>
    <div class="devide"></div>
    <div class="caruser_b">
      <div class="route">
        <div class="icon">
          <img src="./../../assets/img/route.png" alt="">
        </div>
        <div class="title">
          行驶路线
        </div>
      </div>
      <div class="route_input">
        <textarea v-model="orderInfo.roadline"></textarea>
      </div>
      <div class="car_box">
        <div class="icon">
          <img src="./../../assets/img/car.png" alt="">
        </div>
        <div class="title">
          品牌车型
        </div>
        <div class="input_box">
          <input type="text" placeholder="例如：雪佛兰科鲁兹" v-model="orderInfo.motorType" disabled>
        </div>
      </div>
      <div class="car_box">
        <div class="icon">
          <img src="./../../assets/img/pay.png" alt="">
        </div>
        <div class="title" style="width: 60%;">
          <popup-picker
            :placeholder="'乘客分摊费用'"
            :data="peopleFreeList"
            v-model="peopleMoney"
            @on-change="onFreeChange">
             </popup-picker>
        </div>
        <div class="input_box">
          <!-- <input type="text" placeholder=""> -->
        </div>
      </div>
      <div class="route">
        <div class="icon">
          <img src="./../../assets/img/note.png" alt="">
        </div>
        <div class="title">
          备注
        </div>
      </div>
      <div class="note_input">
        <textarea v-model="orderInfo.remark" disabled></textarea>
      </div>
      <!-- <div class="caruser_phone">
        <div class="phone_left">您的联系电话：138457891</div>
        <div class="btn">修改</div>
      </div> -->
      <div class="summit_btn" @click="update">
        修改行程
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { loadPeopleFree, loadReverInfo, updatePublish } from '@/api/allapis'
import { Datetime, PopupPicker, Popup } from 'vux'
import topHeader from './../../components/topHeader'
import axios from 'axios'
export default {
  data () {
    return {
      id: null,
      peopleFreeList: [],
      peopleMoney: [],
      peopleNumList: [],
      peopleNum:[],
      orderInfo: {
        start: '',
        end: '',
        roadline: '',
        outtime: '',
        motorType: '',
        freeSeat: '',
        cost: '',
        remark: '',
      }
    }
  },

  components: {
    Datetime,
    PopupPicker,
    topHeader,
    Popup
  },
  created () {
    this.loadPeopleNumList()
    this.loadOrderInfo()
    this.loadPeopleFree()
    // this.loadPeopleNumList()
    // this.loadCityList()
    // this.loadPeopleFree()
  },

  methods: {
    loadPeopleNumList () {
      let numList = []
      for(let i = 1; i <= 100; i++){
        numList.push(i)
      }
      this.peopleNumList.push(numList)
    },
    async loadPeopleFree () {
      let freeList = []
      await loadPeopleFree().then(res => {
        if(res.data){
          res.data.forEach(elm => {
            freeList.push(elm.num)
          })
        }
      })
      this.peopleFreeList.push(freeList)
    },
    loadOrderInfo () {
      loadReverInfo({ orderId:this.$route.query.id }).then(res => {
        this.orderInfo = res.data
        this.peopleNum.push(res.data.freeSeat)
        this.peopleMoney.push(res.data.cost)
        // this.orderInfo.outtime = res.data.outtime.split('.')
        // console.log(this.orderInfo.outtime)
      })
    },
    changeTime (dateVal) {
      this.orderInfo.outtime = dateVal
    },
    onFreeChange (val) {
      this.orderInfo.cost = val.join('')
    },
    
    onPeopleChange (val) {
      this.orderInfo.freeSeat = val.join('')
    },
    update () {
      let params = {
        id: this.$route.query.id,
        time: this.orderInfo.outtime,
        cost: this.orderInfo.cost,
        roadLine: this.orderInfo.roadline,
        free: this.orderInfo.freeSeat
      }
      updatePublish(params).then(res=>{
          this.$vux.alert.show({
            title: '人人同行提示',
            content: res.msg,
            buttonText: '好的',
            hideOnBlur: true,
            maskZIndex: 100
          })
          this.$router.go(-1)
      })
    },
    goPrev () {
      this.$router.go(-1)
    }
  }
}

</script>
<style lang='less' scoped>
@import url('./updatePublish.less');
</style>